如果昨天沒有做出來 , 可以下載 第 4 天成品
然後用 npm start 看到許多的貓咪

小貓很可愛 , 但是我們要認真工作時 , 他太可愛了 ,

你的同事可能看到這隻貓咪 就開始跟你聊天

最後可能聊得太開心 , 要工作時下班鐘已打

為了避免這種情況 , 我們認真工作時 , 只好先收起貓貓 ,

工作告一段落時 , 再將貓貓打開來 , 療育一下

這時就需要用到 Tray ( 系統通知區 ) 完成收起 & 打開

下方來自官方文件的範例

 tray = new Tray('/path/to/my/tray_icon')
  const contextMenu = Menu.buildFromTemplate([
    { label: 'Item1', type: 'radio' },
    { label: 'Item2', type: 'radio' },
    { label: 'Item3', type: 'radio', checked: true },
    { label: 'Item4', type: 'radio' }
  ])
  tray.setToolTip('This is my application.') // 提示訊息
  tray.setContextMenu(contextMenu)   // 右鍵選單

如果對應到實際功能就是以下圖片

以下我們接續昨天的進度 , 追加 Tray ( 系統通知區 )

第一步 , 下載 tray_icon

第二步 , 引入 Tray 與 Menu

// main.js
const path = require('path');
+ const Tray = require('electron').Tray; // 系統通知區
+ const Menu = require('electron').Menu; // 應用程式選單

第三步 , 在 main.js 中追加 createTray 函式

// main.js
function createTray(win) {

    const iconPath = path.join(__dirname, './imgs/tray_cat.png');
    const tray = new Tray(iconPath)
    const contextMenu = Menu.buildFromTemplate([
        {
            label: '貓咪 4', click: () => {
                win.show();
                win.webContents.send('switch-cat', 4);
            }
        },
        {
            label: '貓咪 5', click: () => {
                win.show();
                win.webContents.send('switch-cat', 5);
            }
        },
        {
            label: '貓咪 6', click: () => {
                win.show();
                win.webContents.send('switch-cat', 6);
            }
        },
        {
            label: '縮小',
            click: () => win.hide() // 隱藏 桌面貓咪
        },
        {
            label: '結束',
            click: () => {
                app.isQuiting = true;
                app.quit();
            }
        }
    ])
    tray.setToolTip('這是縮小的小貓')
    tray.setContextMenu(contextMenu);

    tray.on('click', () => win.show())

    return tray;
}

第四步 , 在 app.on('ready' 區塊中使用 createTray

// main.js
app.on('ready', () => {

    const win = createWindow();
+    createTray(win);

    [1, 2, 3].map(number => {

        globalShortcut.register(`CommandOrControl+${number}`, () => {
            win.webContents.send('switch-cat', number);
            win.show();  // Shows and gives focus to the window.
        })
    })
})

第五步 , 我們可以將 BrowserWindow 預設成 hide , 之後用 Tray ( 系統通知區 ) 把它顯示出來

// main.js
const mainWindow = new BrowserWindow({
    width: 400,
    height: 420,
    webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
    },
    frame: false,      // 標題列不顯示
    transparent: true, // 背景透明
    autoHideMenuBar: true, //  工具列不顯示
+    show: false,      // 不顯示 BrowserWindow
});

之後 npm start 就可以縮小與顯示貓咪們 !

參考資料

• Electron 文件 - tray

今年小弟第一次參加 `鐵人賽` , 如文章有誤 , 請各位前輩提出指正 , 感謝  <(_ _)>